<template>
  <div class="container_sort">
    <ul class="type2">
      <li
        v-for="(item ,index) in type2"
        :key="index"
        class="item"
        :class="item.mark == true?'active':'active1'"
        @click="checkEvent(item ,index)"
      >
        {{item.name}}
        <img :src="item.src" alt class="img" v-if="index!==0" />
      </li>
    </ul>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      ImgBaseUrl: common.image_response, //img 域名
      type2: [
        {
          name: "距离最近",
          id: 1,
          "mark": true
        },
        {
          name: "全城",
          id: 2,
          src: "https://img.ameimeika.com//h5_images/lifebeauty/up.png",
          "mark": true
        },
        {
          name: "智能排序",
          id: 3,
          src: "https://img.ameimeika.com/h5_images/lifebeauty/up.png",
          "mark": true
        }
      ],
      typeId: -1,
      url: "https://img.ameimeika.com/h5_images/lifebeauty/down.png",
      src: "https://img.ameimeika.com/h5_images/lifebeauty/up.png",
      current: -1,
      sortname: ""
    };
  },
  methods: {
    checkEvent: function(e, index) {
      // this.current = index
      if (index == 0) {
        e.mark = !e.mark;
      } else {
        e.mark = true;
      }

      this.type2.forEach(el => {
        if (el.id == e.id) {
          el.src = this.url;
        } else {
          el.src = this.src;
        }
        if (el.id - 1 == index) {
        } else {
          el.mark = false;
        }
      });
      this.$forceUpdate();
      // e.mark = true;

      // console.log(e.mark);
      this.$emit("getVal", e);
    }
  },
  watch: {
    sortText1(newval, val) {
      this.type2[2].name = newval;
    },
    num1(newval, val) {
      this.type2[1].name = newval;
    }
  },
  props: {
    sortText1: "",
    num1: "",
    num2: "",
    num4: ""
  },
  onLoad(){
    // this.sortText1 = "全城1"
    // this.num1 = "智能排序1"
  },
  destroyed() {
    // this.sortText1 = "全城2"
    // this.num1 = "智能排序2"
  },
};
</script>


<style lang="less" scoped>
.container_sort {
  background: #fff;
  height: auto;
  .type2 {
    width: 100%;
    height: 36px;
    padding: 8px 0;
    box-sizing: border-box;
    font-size: 14px;
    color: #3f454b;
    display: flex;
    text-align: center;
    .item {
      width: 33.3%;
      height: auto;
      &.active {
        color: #ec588b;
      }
      &.active1 {
        color: #3f454b;
      }

      &.item:nth-of-type(2) {
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
      }
    }
    .img {
      width: 8px;
      height: 6px;
    }
  }
}
</style>


